<template>
  <div class="mt-8">
    <h4 class="font-medium text-gray-800 mb-4">年代筛选</h4>
    <div class="space-y-2">
      <label class="flex items-center cursor-pointer">
        <input
          type="checkbox"
          class="form-checkbox h-4 w-4 text-primary rounded border-gray-300"
          v-model="localEras"
          :value="'ancient'"
        />
        <span class="ml-2 text-gray-700">古代 ({{ eraCounts.ancient }})</span>
      </label>
      <label class="flex items-center cursor-pointer">
        <input
          type="checkbox"
          class="form-checkbox h-4 w-4 text-primary rounded border-gray-300"
          v-model="localEras"
          :value="'modern'"
        />
        <span class="ml-2 text-gray-700">近现代 ({{ eraCounts.modern }})</span>
      </label>
      <label class="flex items-center cursor-pointer">
        <input
          type="checkbox"
          class="form-checkbox h-4 w-4 text-primary rounded border-gray-300"
          v-model="localEras"
          :value="'contemporary'"
        />
        <span class="ml-2 text-gray-700">当代 ({{ eraCounts.contemporary }})</span>
      </label>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, ref, watch } from 'vue'

// 年代数量统计
const eraCounts = {
  ancient: 42,
  modern: 56,
  contemporary: 30,
}

// 定义props
const props = defineProps<{
  selectedEras: string[]
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'era-change', eras: string[]): void
}>()

// 本地状态
const localEras = ref<string[]>([...props.selectedEras])

// 监听变化并 emit 事件
watch(localEras, (newVal) => {
  emit('era-change', newVal)
})

// 监听 prop 变化更新本地状态
watch(
  () => props.selectedEras,
  (newVal) => {
    localEras.value = [...newVal]
  }
)
</script>

<style scoped>
.text-primary {
  color: var(--primary);
}
</style>
